  // 加载头部
  $('.header').load('header.html', function() {
      $('.about-li').addClass('active').siblings('.active').removeClass('active');
  });
  // 加载底部
  $('footer').load('footer.html');
  // 动画
  $('.animate').scrolla({
      mobile: false,
      once: false
  });
  resize();

  function resize() {
      var windowWidth = $(window).width();
      if (windowWidth > 768) {
          /* 图片滚动效果 */
          $(".mr-frbox").slide({
              titCell: "",
              mainCell: ".mr-frUl ul",
              // autoPage: true,
              effect: "leftLoop",
              autoPlay: true,
              vis: 3
          });
          // $(function(){
          var x = -100;
          var y = 20;
          $("#mr-fu li").mouseover(function(e) {
              var href = $(this).find('img').attr('src');
              var tooltip = "<div id='tooltip'><img src='" + href + "' alt='证书预览'/><\/div>"; //创建 div 元素
              $("body").append(tooltip); //把它追加到文档中                       
              $("#tooltip").css({
                  "top": (e.pageY + y) + "px",
                  "left": (e.pageX + x) + "px"
              }).show("fast"); //设置x坐标和y坐标，并且显示
          }).mouseout(function() {
              $("#tooltip").remove(); //移除 
          }).mousemove(function(e) {
              $("#tooltip").css({
                  "top": (e.pageY + y) + "px",
                  "left": (e.pageX + x) + "px"
              });
          });
      } else {
          var mySwiper = new Swiper('.swiper-container', {
              paginationClickable: true,
              autoplay: 3000,
              loop: false,
              autoplayDisableOnInteraction: false,
              pagination: '.swiper-pagination',
              slidesPerView: 2,
              spaceBetween: 10
          })
          var initPhotoSwipeFromDOM = function(gallerySelector) {
              // parse slide data (url, title, size ...) from DOM elements 
              // (children of gallerySelector)
              var parseThumbnailElements = function(el) {
                  var thumbElements = el.childNodes,
                      numNodes = thumbElements.length,
                      items = [],
                      figureEl,
                      childElements,
                      linkEl,
                      size,
                      item;
                  for (var i = 0; i < numNodes; i++) {
                      figureEl = thumbElements[i]; // <figure> element
                      // include only element nodes 
                      if (figureEl.nodeType !== 1) {
                          continue;
                      }
                      linkEl = figureEl.children[0]; // <a> element
                      size = linkEl.getAttribute('data-size').split('x');
                      // create slide object
                      item = {
                          src: linkEl.getAttribute('href'),
                          w: parseInt(size[0], 10),
                          h: parseInt(size[1], 10)
                      };
                      if (figureEl.children.length > 1) {
                          // <figcaption> content
                          item.title = figureEl.children[1].innerHTML;
                      }
                      if (linkEl.children.length > 0) {
                          // <img> thumbnail element, retrieving thumbnail url
                          item.msrc = linkEl.children[0].getAttribute('src');
                      }
                      item.el = figureEl; // save link to element for getThumbBoundsFn
                      items.push(item);
                  }
                  return items;
              };
              // find nearest parent element
              var closest = function closest(el, fn) {
                  return el && (fn(el) ? el : closest(el.parentNode, fn));
              };
              // triggers when user clicks on thumbnail
              var onThumbnailsClick = function(e) {
                  e = e || window.event;
                  e.preventDefault ? e.preventDefault() : e.returnValue = false;
                  var eTarget = e.target || e.srcElement;
                  var clickedListItem = closest(eTarget, function(el) {
                      return el.tagName === 'FIGURE';
                  });
                  if (!clickedListItem) {
                      return;
                  }
                  // find index of clicked item
                  var clickedGallery = clickedListItem.parentNode,
                      childNodes = clickedListItem.parentNode.childNodes,
                      numChildNodes = childNodes.length,
                      nodeIndex = 0,
                      index;
                  for (var i = 0; i < numChildNodes; i++) {
                      if (childNodes[i].nodeType !== 1) {
                          continue;
                      }
                      if (childNodes[i] === clickedListItem) {
                          index = nodeIndex;
                          break;
                      }
                      nodeIndex++;
                  }
                  if (index >= 0) {
                      openPhotoSwipe(index, clickedGallery);
                  }
                  return false;
              };
              // parse picture index and gallery index from URL (#&pid=1&gid=2)
              var photoswipeParseHash = function() {
                  var hash = window.location.hash.substring(1),
                      params = {};
                  if (hash.length < 5) {
                      return params;
                  }
                  var vars = hash.split('&');
                  for (var i = 0; i < vars.length; i++) {
                      if (!vars[i]) {
                          continue;
                      }
                      var pair = vars[i].split('=');
                      if (pair.length < 2) {
                          continue;
                      }
                      params[pair[0]] = pair[1];
                  }
                  if (params.gid) {
                      params.gid = parseInt(params.gid, 10);
                  }
                  if (!params.hasOwnProperty('pid')) {
                      return params;
                  }
                  params.pid = parseInt(params.pid, 10);
                  return params;
              };
              var openPhotoSwipe = function(index, galleryElement, disableAnimation) {
                  var pswpElement = document.querySelectorAll('.pswp')[0],
                      gallery,
                      options,
                      items;
                  items = parseThumbnailElements(galleryElement);
                  // define options (if needed)
                  options = {
                      index: index,
                      // define gallery index (for URL)
                      galleryUID: galleryElement.getAttribute('data-pswp-uid'),
                      getThumbBoundsFn: function(index) {
                          // See Options -> getThumbBoundsFn section of docs for more info
                          var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail
                              pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
                              rect = thumbnail.getBoundingClientRect();
                          return {
                              x: rect.left,
                              y: rect.top + pageYScroll,
                              w: rect.width
                          };
                      },
                      // history & focus options are disabled on CodePen
                      // remove these lines in real life: 
                      historyEnabled: false,
                      focus: false
                  };
                  if (disableAnimation) {
                      options.showAnimationDuration = 0;
                  }
                  // Pass data to PhotoSwipe and initialize it
                  gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
                  gallery.init();
              };
              // loop through all gallery elements and bind events
              var galleryElements = document.querySelectorAll(gallerySelector);
              for (var i = 0, l = galleryElements.length; i < l; i++) {
                  galleryElements[i].setAttribute('data-pswp-uid', i + 1);
                  galleryElements[i].onclick = onThumbnailsClick;
              }
              // Parse URL and open gallery if it contains #&pid=3&gid=1
              var hashData = photoswipeParseHash();
              if (hashData.pid > 0 && hashData.gid > 0) {
                  openPhotoSwipe(hashData.pid - 1, galleryElements[hashData.gid - 1], true);
              }
          };
          // execute above function
          initPhotoSwipeFromDOM('.my-simple-gallery');
      }
  }
  window.onresize = function() {
      resize();
  }